import React, {Component} from 'react';
import {Layout, Menu, Button} from 'antd';
import {
    FolderViewOutlined,
    PieChartOutlined,
    MailOutlined,
    TeamOutlined,
    SettingOutlined,
    UserOutlined,
} from '@ant-design/icons';
import {NavLink, Route} from "react-router-dom";
import {connect} from 'react-redux';
import {deleteUserInfo} from '../redux/actions/login_action';
import numbering from './numbering/numbering';
import myself from './myself/myself';
import content from './examine/content';
import comment from './examine/comment';
import user from './manage/user';
import admin from './manage/admin';
import lable from './management/lable';
import carousel from './management/carousel';
import jubao from './feedback/jubao';
import fankui from './feedback/fankui';
import shensu from './feedback/shensu';
import checkLogin from './check_login';

const {Header, Content, Sider} = Layout;
const {SubMenu} = Menu;

@connect(
    state =>({userInfo:state.userInfo}),
    {deleteUserInfo}
    )
@checkLogin
class Home extends Component {
    state = {
        collapsed: false,
    };

    onCollapse = collapsed => {
        collapsed = !this.state.collapsed;
        this.setState({collapsed: collapsed});
    };

    logout = ()=>{
        this.props.deleteUserInfo();
        this.props.history.push('/login');
    }

    render() {
        const {uinfo} = this.props.userInfo
        const {pathname} = this.props.location
        return (
            <Layout style={{minHeight: '100vh'}}>
                <Header className='header' style={{backgroundColor: '#373d41'}}>
                    <div>
                        <span style={{color: '#fff'}}>“成大通”信息平台</span>
                    </div>
                    <div>
                        <span style={{marginRight: '50px', fontSize: '14px', color: '#fff'}}>{this.props.userInfo.uinfo.nickname}</span>
                        <Button type="text" onClick={this.logout} style={{color: 'white'}}>退出</Button>
                    </div>
                </Header>
                <Layout className="site-layout">
                    <Sider collapsed={this.state.collapsed} style={{background:'#333744'}}>
                        <div className="toggle-button" onClick={this.onCollapse}>|||</div>
                        <Menu
                            theme={"dark"}
                            selectedKeys={[pathname.split('/').reverse()[0] || '/']}
                            defaultOpenKeys={[pathname.split('/').splice(1)[0]]}
                            mode="inline"
                            style={{background:'#333744'}}
                        >
                            <Menu.Item key="/" icon={<PieChartOutlined/>}>
                                <NavLink to='/'>数据中心</NavLink>
                            </Menu.Item>
                            <Menu.Item key="myself" icon={<UserOutlined/>}>
                                <NavLink to='/myself'>个人中心</NavLink>
                            </Menu.Item>
                            <SubMenu key="examine" icon={<FolderViewOutlined />} title="审核中心"
                                     disabled={uinfo.jurisdiction.issh !== '1'}
                            >
                                <Menu.Item key="content">
                                    <NavLink to='/examine/content'>内容审核</NavLink>
                                </Menu.Item>
                                <Menu.Item key="comment">
                                    <NavLink to='/examine/comment'>评论审核</NavLink>
                                </Menu.Item>
                            </SubMenu>
                            <SubMenu key="manage" icon={<TeamOutlined />} title="用户管理"
                                     disabled={uinfo.jurisdiction.isyh !=='1'}
                            >
                                <Menu.Item key="user">
                                    <NavLink to='/manage/user'>用户管理</NavLink>
                                </Menu.Item>
                                <Menu.Item key="admin">
                                    <NavLink to='/manage/admin' disabled={uinfo.username !== 'admin'}>管理员管理</NavLink>
                                </Menu.Item>
                            </SubMenu>
                            <SubMenu key="management" icon={<SettingOutlined />} title="网站管理中心"
                                     disabled={uinfo.jurisdiction.isgl !== '1'}
                            >
                                <Menu.Item key="lable">
                                    <NavLink to='/management/lable'>标签管理</NavLink>
                                </Menu.Item>
                                <Menu.Item key="carousel">
                                    <NavLink to='/management/carousel'>轮播管理</NavLink>
                                </Menu.Item>
                            </SubMenu>
                            <SubMenu key="feedback" icon={<MailOutlined />} title="反馈中心"
                                     disabled={uinfo.jurisdiction.isfk !== '1'}
                            >
                                <Menu.Item key="fankui">
                                    <NavLink to='/feedback/fankui'>意见反馈</NavLink>
                                </Menu.Item>
                                <Menu.Item key="jubao">
                                    <NavLink to='/feedback/jubao'>违规举报</NavLink>
                                </Menu.Item>
                                <Menu.Item key="shensu">
                                    <NavLink to='/feedback/shensu'>账号申诉</NavLink>
                                </Menu.Item>
                            </SubMenu>
                        </Menu>
                    </Sider>
                    <Content style={{margin: '0 16px'}}>
                        <Route path='/' component={numbering} exact></Route>
                        <Route path='/myself' component={myself}></Route>
                        <Route path='/examine/content' component={content}></Route>
                        <Route path='/examine/comment' component={comment}></Route>
                        <Route path='/manage/user' component={user}></Route>
                        <Route path='/manage/admin' component={admin}></Route>
                        <Route path='/management/lable' component={lable}></Route>
                        <Route path='/management/carousel' component={carousel}></Route>
                        <Route path='/feedback/fankui' component={fankui}></Route>
                        <Route path='/feedback/jubao' component={jubao}></Route>
                        <Route path='/feedback/shensu' component={shensu}></Route>
                    </Content>
                </Layout>
            </Layout>
        );
    }
}
export default Home
